<template>
  <view class="container">
    <Loading :show="isLoading" />
    <!-- 商品轮播图 -->
    <swiper
      class="swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="1000"
    >
      <swiper-item v-for="(image, index) in productImages" :key="index">
        <image :src="image" mode="aspectFill" class="swiper-image" @click="previewImage(index)" />
      </swiper-item>
    </swiper>

    <!-- 商品信息 -->
    <view class="product-info">
      <view class="price-section">
        <text class="current-price">¥{{ product.price }}</text>
        <text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
      </view>
      <text class="product-name">{{ product.name }}</text>
      <view class="product-meta">
        <text class="sales">销量: {{ product.productDetail?.sales || 0 }}</text>
        <text v-if="product.isHot" class="hot-tag">热销</text>
      </view>
    </view>

    <!-- 商品描述 -->
    <view class="description-section">
      <text class="section-title">商品描述</text><br/>
      <text class="description">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ product.productDetail?.description || product.description }}</text>
    </view>

    <!-- 商品评论 -->
    <view class="review-section">
      <view class="review-header">
        <text class="section-title">商品评价</text>
        <view class="review-header-right">
          <text class="review-count" v-if="total > 0">({{ total }})</text>
          <text v-if="total > 1" class="more-link" @click="goToReviewList">更多</text>
        </view>
      </view>
      <view v-if="reviews.length > 0" class="review-list">
        <view v-for="review in reviews.slice(0, 3)" :key="review.id" class="review-item">
          <view class="review-user">
            <image 
              class="user-avatar" 
              :src="review.userAvatar" 
              mode="aspectFill"
            />
            <view class="user-info">
              <view class="user-name-row">
            <text class="user-name">{{ review.userName }}</text>
                <text class="user-gender" v-if="review.userGender === 1">♂</text>
                <text class="user-gender female" v-else-if="review.userGender === 2">♀</text>
                <text class="user-points">积分: {{ review.userPoints }}</text>
              </view>
              <view class="review-meta">
            <text class="review-time">{{ formatTime(review.createTime) }}</text>
                <view class="rating">
                  <text v-for="i in 5" :key="i" class="star" :class="{ 'active': i <= review.rating }">★</text>
                </view>
              </view>
            </view>
          </view>
          <view class="review-content">
            <text class="review-text">{{ review.content }}</text>
            <view v-if="review.images" class="review-images">
              <image 
                v-for="(image, index) in review.images.split(',')" 
                :key="index"
                :src="image"
                mode="aspectFill"
                class="review-image"
                @click="previewReviewImage(review.images.split(','), index)"
              />
            </view>
          </view>
        </view>
      </view>
      <view v-else class="no-review">
        <image src="/static/empty.png" mode="aspectFit" class="empty-image" />
        <text>暂无评价</text>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="action-buttons">
        <button 
          class="favorite-btn" 
          @click="isFavorite ? handleDeleteFavorite() : handleAddFavorite()"
        >
          <text v-if="isFavorite">❤️</text>
          <text v-else>🤍</text>
        </button>
        
        <!-- 加入购物车按钮 -->
        <button 
          v-if="isFromProducts" 
          class="add-to-cart-btn" 
          @click="addToCart"
        >
          加入购物车
        </button>
        
        <!-- 查找售货机按钮 -->
        <button 
          v-else 
          class="vending-machine-btn" 
          @click="findVendingMachines"
        >
          附近有货售货机
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getProductDetail } from '@/api/product'
import { getProductReviews } from '@/api/order/orderReview'
import Loading from '@/components/Loading.vue'
import { getUserAccount } from '@/api/user'
import http from '@/utils/request'
import { addFavorite, deleteFavorite, getFavoriteList } from '@/api/product/favorite'
import { getDeviceWithStock } from '@/api/device'

interface Product {
  id: number;
  name: string;
  price: number;
  originalPrice: number;
  description: string;
  mainImage: string;
  subImages: string[];
  sales: number;
  isHot: number;
  channelNo: string;
  channelId: number;
  productDetail?: {
    sales: number;
    description: string;
    mainImage: string;
    subImages: string;
  };
}

interface Review {
  id: number;
  userId: number;
  userName: string;
  userAvatar: string;
  content: string;
  images: string;
  createTime: string;
  rating: number;
  userPoints: number;
  userGender: number;
  orderNo: string;
  status: number;
}

// 购物车商品接口
interface CartItem {
  channelId: number;
  channelPosition: string;
  id: number;
  mainImage: string;
  name: string;
  price: number;
  quantity: number;
  stock: number;
}

const product = ref<Product>({
  id: 0,
  name: "",
  price: 0,
  originalPrice: 0,
  description: "",
  mainImage: "",
  subImages: [],
  sales: 0,
  isHot: 0,
  channelId: 0,
  channelNo: "",
  productDetail: {
    sales: 0,
    description: "",
    mainImage: "",
    subImages: ""
  }
});

// 新增购物车商品数据
const cartProduct = ref({
  channelId: 2,
  channelPosition: "A2",
  id: 0,
  mainImage: "",
  name: "",
  price: 0,
  quantity: 1,
  stock: 5,
  channelNo: ""
});

const productImages = ref<string[]>([]);
const isLoading = ref(false)
const reviews = ref<Review[]>([])
const isFromProducts = ref(false)
const total = ref(0)
const isFavorite = ref(false)
const favoriteId = ref<number | null>(null)

// 购物车相关状态
const cartItems = ref<CartItem[]>([])
const showCart = ref(false)
const deviceNo = ref('') // 设备编号

// 购物车计算属性
const cartTotal = computed(() => {
  return cartItems.value.reduce((total, item) => total + item.price * item.quantity, 0)
})


// 从本地存储加载购物车数据
const loadCartItems = () => {
  if (!deviceNo.value) return
  
  try {
    const stored = uni.getStorageSync('device_cart_items')
    if (stored) {
      const data = JSON.parse(stored)
      if (data.deviceNo === deviceNo.value) {
        cartItems.value = data.items
      }
    }
  } catch (e) {
    // 忽略错误
  }
}

// 保存购物车数据到本地存储
const saveCartItems = () => {
  if (!deviceNo.value) return
  
  try {
    const data = {
      deviceNo: deviceNo.value,
      items: cartItems.value,
      selectedCoupon: null
    }
    uni.setStorageSync('device_cart_items', JSON.stringify(data))
  } catch (e) {
    // 忽略错误
  }
}

// 获取商品详情
const fetchProductDetail = async (id: number) => {
  try {
    isLoading.value = true
    const res = await getProductDetail(id)
    product.value = res.data
    // 处理商品图片，确保subImages存在
    const subImagesString = product.value.productDetail?.subImages || ""
    const subImages = subImagesString
      .split(",")
      .filter((item) => item.trim() !== "")
    
    productImages.value = [
      product.value.productDetail?.mainImage,
      ...subImages,
    ].filter(Boolean)
    checkFavorite()
  } catch (error) {
    console.error("获取商品详情失败：", error)
  } finally {
    isLoading.value = false
  }
};

// 获取商品评论
const fetchProductReviews = async (productId: number) => {
  try {
    const res = await getProductReviews(productId, {
      pageNum: 1,
      pageSize: 3
    })
    const reviewsData = res.rows || []
    total.value = res.total || 0
    
    // 获取每个评论的用户信息
    const reviewsWithUserInfo = await Promise.all(
      reviewsData.map(async (review: any) => {
        try {
          // 获取用户账户信息
          const userAccountRes = await getUserAccount(review.userId)
          return {
            ...review,
            userAvatar: userAccountRes.data?.userBase?.avatar || '/static/default-avatar.png',
            userName: userAccountRes.data?.userBase?.username || '匿名用户',
            userPoints: userAccountRes.data?.points || 0,
            userGender: userAccountRes.data?.userBase?.gender || 0
          }
        } catch (error) {
          console.error('获取用户信息失败：', error)
          return {
            ...review,
            userAvatar: '/static/default-avatar.png',
            userName: '匿名用户',
            userPoints: 0,
            userGender: 0
          }
        }
      })
    )
    
    reviews.value = reviewsWithUserInfo
  } catch (error) {
    console.error("获取商品评论失败：", error)
  }
};

// 预览图片
const previewImage = (index: number) => {
  uni.previewImage({
    urls: productImages.value,
    current: index,
    indicator: 'default',
    loop: true,
    fail: (err) => {
      console.error('预览图片失败：', err);
    }
  });
};

// 查找附近售货机
const findVendingMachines = async () => {
  try {
    isLoading.value = true;
    const res = await getDeviceWithStock(product.value.id);
    if (res.data && res.data.length > 0) {
      // 将设备列表转换为地图页面需要的格式
      const devices = res.data.map((device: any) => ({
        id: device.deviceId,
        name: device.deviceName,
        latitude: device.latitude,
        longitude: device.longitude,
        address: device.address,
        stock: device.stock,
        distance: device.distance
      }));
      
      // 跳转到地图页面，并传递设备列表
      uni.navigateTo({
        url: `/pages/vending-machines/map?devices=${encodeURIComponent(JSON.stringify(devices))}&productId=${product.value.id}`
      });
    } else {
      uni.showToast({
        title: '附近暂无有货的售货机',
        icon: 'none',
        duration: 2000
      });
    }
  } catch (error) {
    console.error('获取有货设备失败：', error);
    uni.showToast({
      title: '获取设备信息失败',
      icon: 'none',
      duration: 2000
    });
  } finally {
    isLoading.value = false;
  }
};

// 格式化时间
const formatTime = (time: string) => {
  if (!time) return ''
  const date = new Date(time)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 预览评论图片
const previewReviewImage = (images: string[], current: number) => {
  uni.previewImage({
    urls: images,
    current: current,
    indicator: 'default',
    loop: true
  })
}

// 跳转到评论列表页
const goToReviewList = () => {
  if (product.value?.id) {
    uni.navigateTo({
      url: `/pages/product/review-list?id=${product.value.id}`
    })
  }
}

// 查询当前商品是否已收藏
const checkFavorite = async () => {
  if (!product.value.id) return
  try {
    const res = await getFavoriteList({ productId: product.value.id })
    if (res.rows && res.rows.length > 0) {
      isFavorite.value = true
      favoriteId.value = res.rows[0].id
    } else {
      isFavorite.value = false
      favoriteId.value = null
    }
  } catch (error) {
    console.error('查询收藏状态失败:', error)
    isFavorite.value = false
    favoriteId.value = null
  }
}

// 收藏
const handleAddFavorite = async () => {
  try {
    // 获取当前用户ID
    const userInfo = uni.getStorageSync('userInfo')
    if (!userInfo || !userInfo.id) {
      uni.showToast({ 
        title: '请先登录', 
        icon: 'none',
        duration: 2000
      })
      return
    }
    
    await addFavorite({ 
      productId: product.value.id,
      userId: userInfo.id
    })
    uni.showToast({ 
      title: '收藏成功', 
      icon: 'success',
      duration: 1500
    })
    isFavorite.value = true
    await checkFavorite()
  } catch (e) {
    console.error('收藏失败:', e)
    uni.showToast({ 
      title: '收藏失败', 
      icon: 'none',
      duration: 2000
    })
  }
}

// 取消收藏
const handleDeleteFavorite = async () => {
  if (!favoriteId.value) return
  try {
    await deleteFavorite(favoriteId.value)
    uni.showToast({ 
      title: '已取消收藏', 
      icon: 'success',
      duration: 1500
    })
    isFavorite.value = false
    await checkFavorite()
  } catch (e) {
    console.error('取消收藏失败:', e)
    uni.showToast({ 
      title: '取消失败', 
      icon: 'none',
      duration: 2000
    })
  }
}

// 获取URL参数
onLoad((options) => {
  if (options?.product) {
    try {
      const productDetail = JSON.parse(decodeURIComponent(options.product))
      // 保存商品详情数据用于购物车
      product.value = productDetail
      // 同时更新购物车商品数据
      cartProduct.value = {
        channelId: productDetail.channelId || 2,
        channelPosition: productDetail.channelPosition || "A2",
        id: productDetail.id,
        mainImage: productDetail.mainImage || productDetail.productDetail?.mainImage || "",
        name: productDetail.name,
        price: Number(productDetail.price),
        quantity: 1,
        stock: productDetail.stock || 5,
        channelNo: productDetail.channelNo || ""
      }
    } catch (e) {
      console.error('解析商品数据失败:', e)
    }
  }
  // 检查是否从设备页面进入
  if (options?.from === 'device') {
    isFromProducts.value = true
  }
  
  // 获取设备编号
  if (options?.deviceNo) {
    deviceNo.value = options.deviceNo
  }
  
  if (product.value.id) {
    fetchProductDetail(product.value.id)
    fetchProductReviews(product.value.id)
  }
  if(options?.id) {
    fetchProductDetail(options.id)
    fetchProductReviews(options.id)
  }
  
  // 加载购物车数据
  loadCartItems()
  
  // 检查收藏状态
  
})

// 添加到购物车
const addToCart = () => {
  const existingItem = cartItems.value.find(item => 
    item.channelId === cartProduct.value.channelId && 
    item.id === cartProduct.value.id
  )
  
  if (existingItem) {
    existingItem.quantity++
  } else {
    cartItems.value.push({
      ...cartProduct.value
    })
  }
  
  saveCartItems()
  uni.showToast({
    title: '已加入购物车',
    icon: 'success',
    duration: 1500,
    success: () => {
      // 延迟返回，确保提示显示完成
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  })
}
</script>

<style>
.container {
  padding-bottom: 100px;
}

.swiper {
  width: 100%;
  height: 750rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.product-info {
  padding: 20rpx;
  background-color: #fff;
}

.price-section {
  margin-bottom: 20rpx;
}

.current-price {
  font-size: 40rpx;
  color: #ff4d4f;
  font-weight: bold;
  margin-right: 20rpx;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
}

.product-name {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  line-height: 1.4;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sales {
  font-size: 24rpx;
  color: #999;
}

.hot-tag {
  display: inline-block;
  padding: 4rpx 12rpx;
  background-color: #fff1f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.description-section {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #fff;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.review-section {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.review-header-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.review-count {
  font-size: 28rpx;
  color: #999;
}

.more-link {
  color: #1890ff;
  font-size: 28rpx;
}

.review-list {
  margin-top: 20rpx;
}

.review-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.review-item:last-child {
  border-bottom: none;
}

.review-user {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  border: 2rpx solid #f0f0f0;
}

.user-info {
  flex: 1;
}

.user-name-row {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 8rpx;
}

.user-name {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.user-gender {
  font-size: 24rpx;
  color: #1890ff;
  background-color: #e6f7ff;
  padding: 2rpx 10rpx;
  border-radius: 20rpx;
}

.user-gender.female {
  color: #eb2f96;
  background-color: #fff0f6;
}

.user-points {
  font-size: 24rpx;
  color: #ff4d4f;
  background-color: #fff1f0;
  padding: 2rpx 10rpx;
  border-radius: 20rpx;
}

.review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.review-time {
  font-size: 24rpx;
  color: #999;
}

.rating {
  display: flex;
  align-items: center;
}

.star {
  font-size: 24rpx;
  color: #ddd;
  margin-left: 4rpx;
}

.star.active {
  color: #ffb800;
}

.review-content {
  margin-top: 20rpx;
}

.review-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.review-images {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
  gap: 10rpx;
}

.review-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 8rpx;
  background-color: #f5f5f5;
}

.no-review {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
  color: #999;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-buttons {
  display: flex;
}

.favorite-btn {
  width: 100rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
  background-color: #FF9800;
  color: #fff;
  margin-right: 20rpx;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.favorite-btn:active {
  transform: scale(0.95);
  opacity: 0.9;
}

.cart-section {
  display: flex;
  align-items: center;
  gap: 10rpx;
  position: relative;
}

.cart-count {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 20rpx;
  font-weight: bold;
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius: 16rpx;
  border: 2rpx solid #fff;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.cart-toggle-btn {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
  background-color: #FF9800;
  color: #fff;
  border: none;
  transition: all 0.3s ease;
}

.cart-toggle-btn:active {
  transform: scale(0.95);
}

.cart-icon {
  font-size: 32rpx;
}

.add-to-cart-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
  background-color: #ff4d4f;
  color: #fff;
  border: none;
  transition: all 0.3s ease;
}

.add-to-cart-btn:active {
  transform: scale(0.98);
}

.vending-machine-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
  background-color: #ff4d4f;
  color: #fff;
  border: none;
  transition: all 0.3s ease;
}

.vending-machine-btn:active {
  transform: scale(0.98);
}

.cart-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.cart-content {
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  padding: 24px;
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.cart-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.close-btn {
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background-color: #f5f5f5;
  color: #666;
  font-size: 16px;
  transition: all 0.2s ease;
}

.close-btn:active {
  background-color: #e8e8e8;
  transform: scale(0.95);
}

.cart-items {
  margin-bottom: 24px;
}

.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  background-color: #fafafa;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}

.cart-item:active {
  transform: scale(0.98);
  background-color: #f5f5f5;
}

.cart-item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cart-item-price {
  font-size: 14px;
  color: #ef4444;
  font-weight: 600;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.quantity-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  padding: 0;
}

.quantity-btn:active {
  transform: scale(0.95);
}

.quantity-text {
  font-size: 14px;
  color: #333;
  font-weight: 600;
  margin: 0 8px;
  min-width: 20px;
  text-align: center;
  line-height: 1;
}

.remove-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.remove-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background-color: #ef4444;
  color: #fff;
  transition: all 0.2s ease;
  padding: 0;
}

.remove-btn:active {
  transform: scale(0.95);
  background-color: #dc2626;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
}

.empty-text {
  color: #999;
  font-size: 16px;
  margin-top: 16px;
}

.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.cart-total {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.total-label {
  margin-right: 8px;
}

.total-price {
  font-size: 24px;
  color: #ef4444;
  font-weight: bold;
}

.cart-actions {
  display: flex;
  gap: 16px;
}

.clear-btn {
  padding: 12px 24px;
  border-radius: 20px;
  border: none;
  background-color: #f5f5f5;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  min-width: 80px;
  height: 44px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-btn:active {
  background-color: #e8e8e8;
  transform: scale(0.95);
}

.buy-cart-btn {
  padding: 12px 32px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  transition: all 0.2s ease;
  min-width: 120px;
  height: 44px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buy-cart-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}
</style>
